/*
 * @Description: 流程管理 - 列表
 * @Author: Rfan
 * @Date: 2022-12-11 11:34:13
 * @LastEditTime: 2022-12-11 17:00:11
 */

import { useEffect, useMemo, useState } from 'react';
import { Button, Space, Table } from 'antd';
import { useFormatMessage } from '@/utils/intlHelpers';
import { useFuncAndNavContext } from '../contexts/FuncAndNavContext';
import { formatDate } from '@/utils';
import EditNavDialog from './dialogs/EditNavDialog';
import AddNavDialog from './dialogs/AddNavDialog';
import type { ColumnsType } from 'antd/es/table';

const PageList = () => {
  const { treeData, getTreeData, selectItems, setSelectKey, deleteNavItem } =
    useFuncAndNavContext();

  const formatMessage = useFormatMessage();

  // 表格加载
  const [loading, setLoading] = useState(false);
  // 新增弹窗显示状态
  const [addVisible, setAddVisible] = useState(false);
  // 编辑弹窗显示状态
  const [editVisible, setEditVisible] = useState(false);
  // 选中的数据
  const [selectData, setSelectData] = useState(null);

  useEffect(() => {
    setLoading(true);
    getTreeData().finally(() => {
      setLoading(false);
    });
  }, []);

  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  // const pageChange = (page: number, pageSize: number) => {
  //   setListQuery((state) => ({
  //     ...state,
  //     pageNo: page,
  //     pageSize
  //   }));
  // };

  /**
   * @description : 表格选项相关设置
   * @param {number} selectedRowKeys 选择的项目的KEY
   */
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectKey(selectedRowKeys);
  };

  /**
   * @description:  表格多选配置
   */
  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  /**
   * @description:  打开编辑弹窗
   */
  const editNav = (data: any) => {
    setSelectData(data);
    setEditVisible(true);
  };

  /**
   * @description:  打开新增下级弹窗
   */
  const addSubNav = (data: any) => {
    setSelectData(data);
    setAddVisible(true);
  };

  const columns: ColumnsType = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '菜单名称',
      dataIndex: 'rightsName',
      key: 'rightsName'
    },
    {
      title: '排序',
      dataIndex: 'sortNo',
      key: 'sortNo'
    },

    {
      title: '图标',
      dataIndex: 'rightsIcon',
      key: 'rightsIcon'
    },
    {
      title: '路由',
      dataIndex: 'rightsLink',
      key: 'rightsLink'
    },
    {
      title: '组件',
      dataIndex: 'rightsComponent',
      key: 'rightsComponent'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (text) => formatDate(text)
    },
    {
      title: formatMessage('tableAction'),
      key: 'action',
      render: (_text: any, record: any) => (
        <Space>
          <Button
            type="link"
            size="small"
            onClick={() => {
              editNav(record);
            }}
          >
            编辑
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              addSubNav(record);
            }}
          >
            增加
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              deleteNavItem(record.id);
            }}
          >
            删除
          </Button>
        </Space>
      )
    }
  ];

  return (
    <>
      <Table
        columns={columns}
        dataSource={treeData}
        loading={loading}
        rowKey="id"
        rowSelection={rowSelection}
        bordered
        pagination={null}
        // pagination={{
        //   current: listQuery.pageNo,
        //   pageSize: listQuery.pageSize,
        //   total,
        //   onChange: pageChange
        // }}
      />
      {useMemo(
        () =>
          selectData && (
            <EditNavDialog
              data={selectData}
              visible={editVisible}
              onClose={() => {
                setEditVisible(false);
              }}
            />
          ),
        [editVisible]
      )}

      {useMemo(
        () =>
          selectData && (
            <AddNavDialog
              data={selectData}
              visible={addVisible}
              onClose={() => {
                setAddVisible(false);
              }}
            />
          ),
        [addVisible]
      )}
    </>
  );
};

export default PageList;
